<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>获取当前窗口滚动信息</title>
		<style>
			button {
				position: fixed;
			}

			button:nth-of-type(2) {
				left: 200px;
			}

			div {
				position: fixed;
				top: 300px;
				left: 300px;
			}

			body {
				height: 3000px;
			}
		</style>
	</head>
	<body>
		<button onclick="hanlerClick1(true)">窗口基于当前位置滚动</button>
		<button onclick="hanlerClick2(false)">窗口基于绝对位置滚动</button>

		<script>
			// 获取当前窗口滚动信息
			console.log('当前已从顶部滚动：', window.pageXOffset)
			console.log('当前已从左侧滚动：', window.pageYOffset)

			// 设置窗口滚动
			// 1.window.scrollBy(x,y) 设置窗口相对于当前位置滚动
			function hanlerClick1() {
				window.scrollBy(0, 50)
			}

			// 2. window.scrollTo(pageX,pageY) 设置窗口绝对滚动（对于整个窗口）
			function hanlerClick2() {
				// 0 顶部 / 1e9 底部
				window.scrollTo(0, 100)
			}

			// 【以上这些方法适用于所有浏览器】
		</script>
	</body>
</html>
